<template>
  <div id="app">
    <h2>PS4奖杯截图生成</h2>
    <el-form ref="form" :model="form">
      <el-form-item label="奖杯名字">
        <el-input v-model="form.name" placeholder="如：摸鱼大师"></el-input>
      </el-form-item>
      <el-form-item label="奖杯等级">
        <el-radio v-model="form.trophyType" label="bronze">青铜</el-radio>
        <el-radio v-model="form.trophyType" label="silver">白银</el-radio>
        <el-radio v-model="form.trophyType" label="gold">黄金</el-radio>
        <el-radio v-model="form.trophyType" label="platinum">铂金</el-radio>
      </el-form-item>
      <el-form-item label="截图内容">
        <el-upload
                :auto-upload="false"
                :show-file-list="false"
                :multiple="false"
                :on-change="onImage"
                accept="image/jpeg, image/png"
                action=""
        >
          <el-button slot="trigger" size="small" type="primary">选取图片</el-button>
          <span v-if="imageName" style="color: grey;padding-left: 10px">已选图片：{{ imageName }}</span>
        </el-upload>
      </el-form-item>
      <el-form-item label="奖杯图标">
        <el-upload
                :auto-upload="false"
                :show-file-list="false"
                :multiple="false"
                :on-change="onIcon"
                accept="image/jpeg, image/png"
                action=""
        >
          <el-button slot="trigger" size="small" type="primary">选取图标</el-button>
          <span v-if="iconName" style="color: grey;padding-left: 10px">已选图片：{{ iconName }}</span>
        </el-upload>
      </el-form-item>
      <el-button type="primary" @click="draw">预览截图</el-button>
      <el-button type="success" @click="download">下载截图</el-button>
    </el-form>
    <trophy
            ref="trophy"
            :name="form.name"
            :trophy-type="form.trophyType"
            :trophy-icon="form.icon"
            :trophy-image="form.image"
    />
  </div>
</template>

<script>
import Trophy from './components/Trophy'

export default {
  name: 'app',
  components: { Trophy },
  data() {
    return {
      form: {
        name: '',
        trophyType: 'bronze',
        image: '',
        icon: ''
      },
      imageName: '',
      iconName: ''
    }
  },
  methods: {
    draw() {
      this.$refs.trophy.draw()
    },
    onImage(file) {
      this.imageName = file.name
      this.form.image = URL.createObjectURL(file.raw)
    },
    onIcon(file) {
      this.iconName = file.name
      this.form.icon = URL.createObjectURL(file.raw)
    },
    download() {
      this.$refs.trophy.download()
    }
  }
}
</script>

<style lang="less">
</style>
